html{width: 100%;height: 100%}
body{height: 100%;width: 100%;overflow: hidden;background: no-repeat center;background-size: cover}
*,ul,p,div,span{margin: 0;padding: 0;}
a,a:hover,a:active,a:visited{text-decoration: none;color: inherit}
.main-box{position: absolute;width: 100%;height: 100%;overflow: hidden;}

/** 公共头部 **/
.header{position: absolute;top: 0;height: 0.9rem;width: 100%;left: 0;z-index: 3999}
.header .logobox{height: .9rem;width: 100%;overflow: hidden;padding: 15px;}
.header .logo{background: no-repeat center;background-size: contain;width: 100%;height: 100%}
.header .header_numbox{height: .9rem;width: 100%;line-height: .9rem;overflow: hidden;color: #FFF;font-size: .42rem;font-weight: 600;text-align: center}
.header .header_titlebox{height: .9rem;width: 100%;overflow: hidden;line-height: .9rem;color: #FFF;font-size: .42rem;font-weight: 600;text-align: center}

/** 中间内容容器 **/
.centerbox{position: relative;padding: 1rem .2rem ;width: 100%;height: 100%}
.scrollbox::-webkit-scrollbar {width : 5px;height: 1px;}
.scrollbox::-webkit-scrollbar-thumb {border-radius: 5px;box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.9);}
.scrollbox::-webkit-scrollbar-track {box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.1);border-radius: 5px;}

/** 公共底部 **/
.footer{position: absolute;width: 100%;height: .7rem;overflow: hidden;bottom: 0;background: rgba(0,0,0,.4);z-index: 5999}
.footer .footer_box{position: relative;width: 100%;height: 100%;}
.footer .footer_left,.footer .footer_right{display: flex;display: -webkit-flex;flex-direction: row;justify-content: center}
.footer .footer_item{color: #FFF;font-size: .2rem;line-height: .25rem;text-align: center;padding: .1rem .1rem;cursor: pointer;min-width: .7rem;position: relative}
.footer .footer_item a{color: #FFF}
.footer .footer_item.current{background-color: rgba(0,0,0,.5);}
.footer .footer_item:hover{background-color: rgba(0,0,0,.25);}
.footer .footer_item_title{font-size: .16rem}

/** 二维码展示 **/
.show_qrcode{display: none;position: absolute;left: 0;top: 0;width: 100%;height: 100%;z-index: 9999;background-color: rgba(0,0,0,.8)}
.show_qrcode .closebutton {cursor: pointer;width: .5rem;height: .5rem;position: absolute;right: 0;top: 0;color: #999;font-size: .32rem;line-height: .5rem;text-align: center;background-color: #FFF}
.show_qrcode .title {color: #fff;line-height: 1rem;text-align: center;font-size: .4rem;font-weight: 500}
.show_qrcode .qrcode {width: 4rem;height: 4rem;position: absolute;left: 50%;top: 50%;margin-top: -2rem;margin-left: -2rem;box-shadow: 0 10px 10px #000;padding: .1rem;background-color: #fff}
.show_qrcode .qrcode svg{width: 100%;height: 100%}
/** 签到页面 **/
.signbox{padding: .04rem .1rem;width: 100%;height: 100%;position: relative;background-color: rgba(0,0,0,.3);overflow-x: hidden;overflow-y: auto}
.signbox ul{overflow: hidden}
.signbox ul li{list-style: none;float: left;width: 10%;position: relative;padding: .1rem .2rem 0 .2rem}
.signbox ul li .imgbox{width: 100%;position: relative;padding-bottom: 100%;}
.signbox ul li .imgbox .img{position: absolute;left: 0;top: 0;width: 100%;height: 100%;background-position: center;background-repeat: no-repeat;background-size: cover;border-radius: 50%;overflow: hidden; opacity:0;animation: signuserimg 1.5s ease 0s 1 normal forwards;-moz-animation: signuserimg 1.5s ease 0s 1 normal forwards;-webkit-animation: signuserimg 1.5s ease 0s 1 normal forwards;-o-animation: signuserimg 1.5s ease 0s 1 normal forwards;}
.signbox ul li .title{font-size: .16rem;color: #FFF;height: .38rem;line-height: .3rem;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;text-align: center;animation: signusername 0.5s ease 1s 1 normal forwards;-moz-animation: signusername 0.5s ease 1s 1 normal forwards;-webkit-animation: signusername 0.5s ease 1s 1 normal forwards;-o-animation: signusername 0.5s ease 1s 1 normal forwards;opacity: 0;}


/** 抽奖页面 **/
.drawbox{width: 100%;height: 100%;position: relative;overflow: hidden}
.drawbox .row{position: relative;overflow: hidden;width: 100%;height: 100%;margin: 0;padding: 0}
.drawbox .draw_sbox{height: 100%;position: relative;}
.drawbox .draw_sbox:first-child{padding-left: 0}
.drawbox .draw_sbox:last-child{padding-right: 0}
.drawbox .draw_section{background-color: rgba(0,0,0,.3);overflow-x: hidden;overflow-y: auto;position: relative;height: 100%;border-radius: 15px}
/**左侧*/
.drawbox .draw_section_left{position: relative;padding: .6rem .3rem 1.52rem .3rem;overflow: hidden;height: 100%;width: 100%}
.drawbox .draw_section_ltitle{font-size: .22rem;color: #FFF;text-align: center;height: .5rem;line-height: .5rem;overflow: hidden;font-weight: bold;position: absolute;width: 100%;top: 0;left: 0}

.drawbox .draw_section_lfooter{position: absolute;bottom: 0;padding: 0 .3rem .1rem .3rem;left: 0;}
.drawbox .draw_lfooter_cell{padding: .04rem 0 .04rem 1.2rem;position: relative;}
.drawbox  .draw_lfooter_title{position: absolute;left: 0;top: .04rem;width: 1rem;height: .36rem;line-height: .36rem;overflow: hidden;color: #FFF;font-size: .14rem}
.drawbox .draw_lfooter_value{position: relative;width: 100%;height: .36rem;line-height: .36rem}
.drawbox .prizecheck{height: .36rem;line-height: .36rem;;width: 100%;background-color: inherit;color: #FFF;font-size: .13rem;padding: 0 .06rem;border: .01rem solid #FFF}
.drawbox .prizecheck option{background: rgba(0,0,0,.3);color: #000;padding: 5px 0}
.drawbox  .draw_lfooter_allnumbox{padding: 0 .36rem 0 0;position: relative}
.drawbox .draw_lfooter_allnum{position: relative;width: 100%;height: .36rem;line-height: .36rem;color: #FFF;font-size: .14rem;font-weight: 600;text-align: center}
.drawbox .refresh_allnum{position: absolute;right: 0;top: 0;height: .36rem;width: .36rem;color: #FFF;font-weight: 600;cursor: pointer;text-align: center;}

.drawbox  .draw_num_checkbox{padding: 0 .5rem;position: relative}
.drawbox  .draw_num_checkbox .draw_num_op{height: .36rem;width: .36rem;position: absolute;top: 0;background:rgba(0,0,0,.4);color: #FFF;line-height: .36rem;text-align: center;font-size: .15rem;cursor: pointer;font-weight: 600}
.drawbox  .draw_num_checkbox  .draw_num_desc{left: 0;}
.drawbox  .draw_num_checkbox  .draw_num_asc{right: 0;}
.drawbox  .draw_num_checkbox .draw_num_input{position: relative;height: .36rem;width: 100%;}
.drawbox  .draw_num_checkbox .draw_num_input input{width: 100%;height: .36rem;padding: .04rem 0;text-align: center;background-color: inherit;border: .01rem solid #FFF;color: #FFF;font-size: .14rem;font-weight: 600;line-height: .26rem}

.drawbox .draw_section_lmain{width: 100%;height: 100%;position: relative;overflow: hidden}
.drawbox  .draw_section_lmain_imgbox{height: 60%;width: 80%;margin: 0 auto;position: relative;display: flex;align-items: center;overflow: hidden}
.drawbox  .draw_section_lmain_imgmain{width: 100%;padding-bottom: 100%;position: relative;}
.drawbox  .draw_section_lmain_itembox{width: 100%;height: 20%;color: #FFF;display: flex;align-items: center}
.drawbox .draw_section_lmain_item{font-size: .16rem;font-weight: 600;margin: 0 auto}
.drawbox  .draw_section_lmain_img{background: url("../images/deprize.png") no-repeat center;background-size: contain;position: absolute;width: 100%;height: 100%;top: 0;left: 0;overflow: hidden}

/* 中间 */
.draw_section_user{width: 100%;height: 100%;position: relative;padding-bottom: 1rem;overflow: hidden}
.draw_user_box{width: 100%;height: 100%;position: relative;overflow: hidden;}
.draw_user_scroll{width: 100%;height: 100%;position: relative;overflow-x: hidden;overflow-y: auto}
.draw_user_list{display: flex;justify-content: center;flex-flow:row wrap;width: 100%;align-items: center;min-height: 100%;}
.draw_user_itembox{width: 33%;box-sizing: content-box;}
.draw_user_itemboxm{width: 100%;padding: .3rem .3rem .15rem .3rem;position: relative}
.draw_user_itemtitle{height: .24rem;line-height: .24rem;font-size: .16rem;color: #FFF;text-align: center;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.draw_user_itemmain{width: 100%;padding-bottom: 100%;position: relative}
.draw_user_itemmainbox{width: 100%;height: 100%;position: absolute;padding: .06rem}
.draw_user_itemimgbox{width: 100%;height: 100%;position: relative}
.draw_user_itemimg{position: absolute;width:100%;height:100%;background: url("../images/deuserdraw.png") no-repeat center;background-size: cover;border-radius: 50%;overflow: hidden;top: 0;left: 0}
.draw_user_imgbord{position: absolute;width: 100%;height: 100%;background: url("../images/deuserborder.png") no-repeat center;border-radius: 50%;top: 0;left: 0;background-size: cover;animation: userbord 0.8s linear infinite;-moz-animation: userbord 0.8s linear infinite;-webkit-animation: userbord 0.8s linear infinite;-o-animation: userbord 0.8s linear infinite;}
.draw_star_btnbox{position: absolute;bottom: 0;left: 0;height: 1rem;text-align: center;width: 100%;padding-top: .2rem}
.draw_star_btn{height: .6rem;line-height: .6rem;text-align: center;display: inline-block;width: 2.6rem;background-color: #764B0F;color: #FFF;margin: 0 auto;padding: 0;font-size: .2rem;font-weight: bold;border-radius: .6rem}
.draw_star_btn:hover{background-color: #9B6A24}


.drawbox .draw_section_right{position: relative;padding: .5rem 0 0 0;overflow: hidden;height: 100%;width: 100%}
.drawbox .draw_section_rtitle{font-size: .18rem;color: #FFF;text-align: left;height: .5rem;line-height: .5rem;overflow: hidden;font-weight: bold;position: absolute;width: 100%;top: 0;left: 0;padding: 0 .3rem}
.drawbox .draw_section_rtitle a{font-size: .16rem;float: left}
.drawbox .draw_section_rtitle span{float: right}
.draw_ruser_lbox{position: relative;width: 100%;height: 100%;padding: .1rem .2rem;overflow-x: hidden;overflow-y: auto}
.draw_ruser_item{padding: .1rem .6rem;position: relative;overflow: hidden}
.draw_ruser_imgbox{position: absolute;left: .08rem;top: .1rem;height: .4rem;width: .4rem;}
.draw_ruser_img{position: relative;overflow: hidden;width: 100%;height: 100%;border-radius: 50%;background: url("../images/deheader.png") no-repeat center;background-size: cover}
.draw_ruser_info{position: relative;height: .4rem;line-height: .4rem;overflow: hidden;color: #FFF;font-size: .15rem}
.draw_ruser_delete{position: absolute;width: .4rem;height: .4rem;right: .05rem;top: .1rem;line-height: .4rem;text-align: center;font-size: .18rem;color: #EEE;cursor: pointer;font-weight: normal;display: none}
.draw_ruser_item:hover{background: rgba(255,255,255,.2);border-radius: .1rem;}
.draw_ruser_item:hover .draw_ruser_delete{display: block}

/*中奖列表放大*/
.draw_bigshow{position: absolute;width: 100%;height: 100%;background: rgba(0,0,0,.5);display: none;border-radius: .1rem;padding-bottom: .7rem;left: 0;top: 0;}
.draw_bigshow_bottom{position: absolute;left: 0;bottom:0;width:100%;height: .8rem;}
.draw_bigshow_bottom_btn{width: 1.2rem;height: .4rem;line-height: .4rem;border: .01rem solid #EAAD1F;color: #EAAD1F;font-size: .16rem;text-align: center;margin: .15rem auto;border-radius: .4rem;cursor: pointer;opacity: .4;font-weight: bold}
.draw_bigshow_bottom_btn:hover{opacity: 1}
.draw_bigshow_header{position: absolute;left: 0;top:.2rem;width:100%;height: .8rem;overflow: hidden;background: url("../images/bigheader.png") no-repeat center;background-size: contain;animation: signuserimg 1.5s ease 0s 1 normal forwards;-moz-animation: signuserimg 1.5s ease 0s 1 normal forwards;-webkit-animation: signuserimg 1.5s ease 0s 1 normal forwards;-o-animation: signuserimg 1.5s ease 0s 1 normal forwards;opacity: 0;z-index: 30}
.draw_bigshow_bgimg{position: absolute;width: 100%;height: 100%;background: url("../images/bigbg.png") no-repeat center;background-size: 100%;top: 0;left: 0;z-index: -10}


.draw_bigshow_mian{position: relative;overflow-x: hidden;overflow-y: auto;width: 100%;height: 100%}
.draw_bigshow_list{display: flex;justify-content: center;flex-flow:row wrap;width: 100%;align-items: center;min-height: 100%;}
.draw_bigshow_itembox{width: 20%;box-sizing: content-box;}
.draw_bigshow_itemboxm{width: 100%;padding: .3rem .3rem .15rem .3rem;position: relative}
.draw_bigshow_itemtitle{height: .34rem;line-height: .34rem;font-size: .16rem;color: #FFF;text-align: center;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;background: url("../images/bigtitle.png") no-repeat center;background-size: 100% 100%;}
.draw_bigshow_itemmain{width: 100%;padding-bottom: 100%;position: relative}
.draw_bigshow_itemmainbox{width: 100%;height: 100%;position: absolute;padding: .34rem;}
.draw_bigshow_itemimgbox{width: 100%;height: 100%;position: relative;z-index: 5;}
.draw_bigshow_itemimg{position: absolute;width:100%;height:100%;background: url("../images/deuserdraw.png") no-repeat center;background-size: cover;border-radius: 50%;overflow: hidden;top: 0;left: 0}
.draw_bigshow_imgbord1{position: absolute;width: 100%;height: 100%;top: 0;left: 0;background: url("../images/biguserbrd.png") no-repeat center;background-size: 100% 100%;z-index: 2}
.draw_bigshow_imgbord{position: absolute;width: 100%;height: 100%;background: url("../images/bigusercir.png") no-repeat center;border-radius: 50%;top: 0;left: 0;background-size: 100% 100%;animation: userbord 0.8s linear infinite;-moz-animation: userbord 0.8s linear infinite;-webkit-animation: userbord 0.8s linear infinite;-o-animation: userbord 0.8s linear infinite;z-index: 0}
/*登陆页面*/
.loginbox{position: absolute;width: 100%;height: 100%;overflow: hidden;background: rgba(0,0,0,.3);z-index: 999999;text-align: center;top:0;left: 0}
.loginmain{position: absolute;top: 50%;margin-top: -.7rem;display: block;width: 100%;height: auto}
.loginform{width: 100%;max-width: 500px;height: 1.4rem;display: block;position: relative;margin: 0 auto}
.loginform .form-group{padding: .1rem 0;margin: 0}
.loginform .form-group input#password{height: .5rem;line-height: .5rem;background: rgba(0,0,0,.5);color: #FFF;font-size: .18rem}
.loginform .loginsubbtn{width: 100%;height: .5rem;line-height: .5rem;font-size: .2rem;font-weight: 600;background:rgba(255,255,255,.3);border: none;color: #FFF;border-radius: .1rem}
.loginform .loginsubbtn:hover{background: rgba(255,255,255,.5)}

/** 摇一摇界面 **/
.shakebox{padding: .2rem;width: 100%;height: 100%;position: relative;background-color: rgba(0,0,0,.1);}
.shake_startnumbox {position: absolute;width: 60%;height: 60%;top: 20%;left: 20%;display: none}
.shake_startnum{position: relative;display: flex;justify-content: center;align-items:center;width: 100%;height: 100%;color: #fff;animation: cutdownan-keyframes 1000ms infinite ease both;-webkit-animation: cutdownan-keyframes 1000ms infinite ease both;-moz-animation: cutdownan-keyframes 1000ms infinite ease both;-o-animation: cutdownan-keyframes 1000ms infinite ease both;}
.shake_runwap_box {position: relative;width: 100%;height: 100%;background-color: #a94a4e}
.shake_runwap_box ul {position: relative;width: 100%;height: 100%;}
.shake_runwap_box ul li {display: block;overflow: hidden;height: 10%;width: 100%;}
.shake_runwap_box ul li:nth-child(2n) {background-color: rgba(255, 255, 255, 0.15);}
.shake_runwap_box .runwap {height: 100%;position: relative;overflow: hidden;}
.shake_runwap_box .runwap .order {top: 0;display: block;position: absolute;left: .5rem;bottom: 0;opacity: 0.5;}

.shake_runwap_box .runwap .order i {display: block;width: .5rem;height: 100%;line-height: 100%;font-size: .4rem;text-align: center;color: rgba(255, 255, 255, 0.9);-webkit-transform: rotate(90deg);    font-family: Arial, san-serif;font-style: normal;}
.shake_runwap_box .runwap .ma {background-size: 80px 60px;width: 80px;height: 100%;display: block;position: absolute;left: 0;}
.shake_runwap_box .runwap .touxiang {width: 36px;height: 36px;border-radius: 100%;position: absolute;right: 45px;top: 50%;margin-top: -18px;border: 2px solid #ffffff;}
.shake_runwap_box .runwap .nicheng {line-height: 46px;height: 46px;font-size: 18px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;display: block;position: absolute;right: 95px;top: 50%;margin-top: -23px;color: #FFF;text-align: right;}

.shakemaskbox{position: absolute;width: 100%;height: 100%;top: 0;left: 0;z-index: 4999;background: rgba(0,0,0,.8);display: none}
.shakemaskmain{width: 100%;height: 100%;position: relative}
.shakemask_cell{position: relative;width: 100%;height: 100%;overflow: hidden;}
.shakemask_signmain{position: relative;width: 100%;height: 100%;overflow: hidden;padding: 1.4rem 0}
.shakemask_signheader{position: absolute;top: 0;left: 0;height: 1.4rem;overflow: hidden;width: 100%}
.shakemask_signbox .textbox{font-size: .35rem;color: #FFF;line-height: .6rem;text-align: center;width: 100%;}
.shakemask_signbox .textbox.top{margin-top: .1rem}
.shakemask_signmid{display: flex;justify-content: space-around;align-items: center;flex-wrap: nowrap;width: 100%;height:  100%}
.shakemask_signmid_cell{width: 45%;text-align: center}
.shakemask_signmid_qrcodecell{width: 50%;text-align: center}
.shakemask_signmid_qrcodecell img{max-width: 450px;width: 100%}
#startgame{display: inline-block;padding: .1rem;cursor: pointer}
@-webkit-keyframes cutdownan-keyframes {
    0% {
        opacity: 0;
        -webkit-transform: scale(.3)
    }
    50% {
        opacity: 1;
        -webkit-transform: scale(1.05)
    }
    70% {
        -webkit-transform: scale(.9)
    }
    100% {
        -webkit-transform: scale(5);
        opacity: 0
    }
}

@-moz-keyframes cutdownan-keyframes {
    0% {
        opacity: 0;
        -moz-transform: scale(.3)
    }
    50% {
        opacity: 1;
        -moz-transform: scale(1.05)
    }
    70% {
        -moz-transform: scale(.9)
    }
    100% {
        -moz-transform: scale(5);
        opacity: 0
    }
}

@-webkit-keyframes signuserimg {
    0% {
        -webkit-transform:scale(0.1);
        opacity:0;
    }
    66% {
        -webkit-transform:scale(1.2);
        opacity:1;
    }
    100% {
        -webkit-transform:scale(1);
        opacity:1;
    }
}
@-moz-keyframes signuserimg {
    0% {
        -webkit-transform:scale(0.1);
        opacity:0;
    }
    66% {
        -webkit-transform:scale(1.2);
        opacity:1;
    }
    100% {
        -webkit-transform:scale(1);
        opacity:1;
    }
}
@-webkit-keyframes signusername {
    0% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}
@-moz-keyframes signusername {
    0% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}
@-webkit-keyframes userbord {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(-360deg);
    }
}
@-moz-keyframes userbord {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(-360deg);
    }
}
